<template>
  <div id="boxBind">
    <!-- the Nvar -->
    <van-sticky>
      <van-nav-bar title="院内暂存" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="boxbind-content">
      <!-- scan med waste box -->
      <div class="store-info">
        <div>
          <span>暂存地名称</span>
          <span>医院北楼暂存地</span>
        </div>
        <div>
          <span>暂存地管理员姓名</span>
          <span>XXX</span>
        </div>
        <div>
          <span>交接人姓名</span>
          <span>XXX</span>
        </div>
      </div>
      <!--the history bind -->
      <div class="his-bind">
        <div class="his-bind-title">
          <span>暂存废物信息</span>
        </div>

        <div class="scan-box" @click="toMedBoxRouter">
          <div>
            <span>扫描医废箱/袋</span>
            <span>数量：3个 &emsp; 总重量：120kg</span>
          </div>
          <div>
            <i class="iconfont icon-tubiaolunkuo- the-icon"></i>
          </div>
        </div>

        <div class="his-bind-content" v-for="(item, index) in infoList" :key="index">
          <div class="the-content-div">
            <div class="list-header">
              <div>{{ index + 1 }}</div>
              <span>YLS120486565225</span>
            </div>
            <div class="list-div">
              <span>医废箱类型</span>
              <span>{{ item.kinds }}</span>
            </div>
            <div class="list-div">
              <span>已绑定医废袋数量</span>
              <span style="color:#3F87E6;">
                {{ item.num }}
                <i class="iconfont icon-icon-test"></i>
              </span>
            </div>
            <div class="list-div">
              <span>重量</span>
              <span>{{ item.Weight }}</span>
            </div>
            <div class="list-div">
              <span>复核重量</span>
              <span>
                {{ item.reWeight }}
                <el-divider direction="vertical"></el-divider>
                <!-- <span style="color:#3F87E6;">重新称重</span> -->
                <el-link type="primary" :underline="false">开始称重</el-link>
              </span>
            </div>
            <el-divider></el-divider>
            <label>
              <span>删除</span>
              <span>异常上报</span>
            </label>
          </div>
        </div>
      </div>
    </div>
    <van-button type="primary" block @click="commitStore">完成</van-button>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  name: "BoxBind",
  data() {
    return {
      infoList: [
        {
          kinds: "感染性废物",
          num: "3个",
          Weight: "2个",
          boxWeight: "54kg",
          reWeight: "54kg",
        },
        {
          kinds: "感染性废物",
          num: "3个",
          Weight: "2个",
          boxWeight: "54kg",
          reWeight: "54kg",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toMedBoxRouter() {
      this.$router.push({
        path: "/medScanWaste",
      });
    },
    // 提交暂存
    commitStore() {
      Dialog.confirm({
        message: "暂存完成!",
        cancelButtonText: "确认",
        confirmButtonText: "返回首页",
      })
        .then(() => {
          // on confirm
          this.$router.push({
            path: "/ScanColl",
          });
        })
        .catch(() => {
          // on cancel
          this.$router.push({
            path: "",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.boxbind-content {
  padding: 10px;
  color: #666;
  font-size: 15px;
  background-color: #f2f2f2;
  .store-info {
    width: 100%;
    height: 130px;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    & div {
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      align-items: center;
      & span {
        margin: 5px;
      }
      & span:nth-child(2) {
        color: #333333;
      }
    }
  }
  .his-bind {
    margin-top: 10px;
    font-size: 15px;
    .his-bind-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 0 10px;
      font-weight: 650;
    }
    .his-bind-content {
      height: 255px;
      margin-top: 10px;
      border-radius: 10px;
      //   padding: 10px;
      background-color: #ffffff;
      .the-content-div {
        height: 245px;
        border-radius: 8px;
        padding: 5px;
        // background-color: #f6f8fe;
        & .list-div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 15px;
          & span:nth-child(2) {
            color: #333333;
          }
        }
        & label {
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 17px;
          & span:nth-child(2) {
            color: #ff0000;
          }
        }
        .list-header {
          height: 52px;
          background-color: #f6f8fe;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          display: flex;
          align-items: center;
          & div {
            width: 17px;
            height: 17px;
            background-color: #3f87e6;
            text-align: center;
            line-height: 17px;
            color: #ffffff;
            font-size: 12px;
            margin-left: 20px;
            margin-right: 10px;
          }
          & span {
            color: #333333;
          }
        }
      }
    }
    .scan-box {
      height: 70px;
      background-color: #ffffff;
      margin-top: 10px;
      border-radius: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      & div:nth-child(1) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #333333;
        & span:nth-child(1) {
          font-size: 17px;
          display: block;
          margin-bottom: 5px;
        }
      }
      & div:nth-child(2) {
        height: 40px;
        width: 40px;
        line-height: 40px;
        border: 1px solid #666;
        border-radius: 50%;
        text-align: center;
        .the-icon {
          font-size: 25px;
        }
      }
    }
  }
}
#boxBind .el-divider--horizontal {
  margin: 20px 0 10px 0;
}
</style>
